<template>
  <div class="list" style="min-height: 800px;background:#1d1d1d;">
    <!-- <div class="tab_border">
      <div style="width: 1000%;">
        <div v-for="(item,index) in listheyue" :key="index" @click="onhe(item,index)" class="scroll_tab">{{item.name}}</div>
      </div>
    </div> -->
    <div class="info_border">
      <div class="info_left">
        <div class="applis_one" style="height: 35px; line-height: 35px;">
          <div class="scroll_tab" style="background: #414141;text-align: left;box-sizing: border-box;padding-left: 0.5rem;">名称</div>
        </div>
        <div class="applis_one" v-for="(item, index) in list" :key="index" @click="getItem(item)" style="display: flex;align-items: center">
          <div style="height: 15px;width: 15px;margin: 5px;" @click.stop="add(item)">
             <img src="../../assets/zichan_icon_xuanzhong.png" alt="" style="width: 100%;height100%"/>
          </div>
          <div class="colsumn">
            <div class="font_size28">{{ item.name }}</div>
            <div class="small_text">{{ item.name_code }}</div>
          </div>
        </div>
      </div>
      <div class="info_right">
        <div style="width: 700%;">
          <div class="height8" style="background:#414141;height: 35px; line-height: 35px;">
            <div class="scroll_tab2">最新</div>
            <div class="scroll_tab2">涨跌幅</div>
            <!-- <div class="scroll_tab2">成交量</div> -->
            <div class="scroll_tab2">持仓量</div>
            <!-- <div class="scroll_tab2">仓差</div> -->
            <div class="scroll_tab2">涨跌</div>
            <!-- <div class="scroll_tab2">现手</div> -->
            <div class="scroll_tab2">卖价</div>
            <div class="scroll_tab2">买价</div>
            <div class="scroll_tab2">卖量</div>
            <div class="scroll_tab2">买量</div>
            <!-- <div class="scroll_tab2">结算价</div> -->
            <div class="scroll_tab2">开盘</div>
            <div class="scroll_tab2">最高</div>
            <div class="scroll_tab2">最低</div>
            <!-- <div class="scroll_tab2">昨结</div> -->
            <div class="scroll_tab2">昨收</div>
            <!-- <div class="column" style="background:#646263;" v-if="iszhangfu1" @click="zhangfu(1)">涨幅(%)</div>
            <div class="column" style="background:#646263;" v-if="iszhangfu2" @click="zhangfu(2)">涨跌(%)</div>
            <div class="column" v-if="num1" style="background:#646263;" @click="maion(1)">成交量</div>
            <div class="column" v-if="num2" style="background:#646263;" @click="maion(2)">持仓量</div>
            <div class="column" v-if="num3" style="background:#646263;" @click="maion(3)">日增仓</div> -->
          </div>
          <div class="height8" v-for="(item, index) in list" :key="index" @click="getItem(item)" style="background:#1D1D1D;">
            <!-- <div class="scroll_tab" :class="item.zd >= 0 ? 'up' : 'down'">{{ item.done_price || '--' }}</div> -->
            <!-- <div class="scroll_tab" :class="item.zd >= 0 ? 'up' : 'down'" v-if="iszhangfu1">{{ item.fd || '--' }}%</div>
            <div class="scroll_tab" :class="item.zd >= 0 ? 'up' : 'down'" v-if="iszhangfu2">{{ item.zd || '--' }}%</div>
            <div class="scroll_tab" style="color:#ccc;" v-if="num1">{{ item.done_v || '--' }}</div>
            <div class="scroll_tab" style="color:#ccc;" v-if="num2">{{ item.hold_v || '--' }}</div>
            <div class="scroll_tab" style="color:#ccc;" v-if="num3">--</div> -->
            <div class="scroll_tab2" :class="(ticket[item.code]&&ticket[item.code].wave) >= 0 ? 'up' : 'down'">{{ (ticket[item.code] && ticket[item.code].price.toFixed(item.digit)) || '--' }}</div>
            <div class="scroll_tab2" :class="(ticket[item.code]&&ticket[item.code].wave) >= 0 ? 'up' : 'down'">{{ (ticket[item.code] && ticket[item.code].wave.toFixed(2)) || '--' }} %</div>
            <!-- <div class="scroll_tab2" style="color:#ccc;">{{ item.done_v || '--' }}</div> -->
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].position.toFixed(0)) || '--' }}</div>
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ((ticket[item.code]&&ticket[item.code].price) - (ticket[item.code]&&ticket[item.code].close)).toFixed(item.digit)) || '- -'}}</div>
            <!-- <div class="scroll_tab2" style="color:#ccc;">{{ item.hold_v - item.done_v || '--' }}</div> -->
            <!-- <div class="scroll_tab2" style="color:#ccc;">{{ (item.yesterday_shou - item.done_price).toFixed(2) || '--' }}</div> -->
            <!-- <div class="scroll_tab2" style="color:#ccc;">{{ item.hold_v || '--' }}</div> -->
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].ask.toFixed(item.digit)) || '--' }}</div>
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].bid.toFixed(item.digit)) || '--' }}</div>
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].asm.toFixed(0)) || '--' }}</div>
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].bim.toFixed(0)) || '--' }}</div>
            <!-- <div class="scroll_tab2" style="color:#ccc;">{{ item.done_price || '--' }}</div> -->
           <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].open.toFixed(item.digit)) || '--' }}</div>
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].high.toFixed(item.digit)) || '--' }}</div>
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].low.toFixed(item.digit)) || '--' }}</div>
            <!-- <div class="scroll_tab2" style="color:#ccc;">{{ item.yesterday_wind || '--' }}</div> -->
            <div class="scroll_tab2" style="color:#ccc;">{{ (ticket[item.code] && ticket[item.code].close.toFixed(item.digit))  || '--' }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */
  }),
  name: 'list',
  data() {
    return {
      iszhangfu1: true,
      iszhangfu2: false,
      list: [],
      symbollist:[],
      old_list: [],
      num1: true,
      num2: false,
      num3: false
    };
  },
  created: function() {},
  watch: {
    ticket(val) {
      let that = this;
      setTimeout(() => {
        return (that.old_list = val);
      }, 500);
    },
    symbos(val) {
      this.list = val.symbols;
      // console.log(this.list)
    }
  },
  mounted() {
    for (let i in this.symbol) {
      this.symbollist.push(this.symbol[i]);
    }
    if (this.symbollist[0] == undefined) {
      this.list = [];
    } else {
      this.list = this.symbollist[0].symbols;
    }
  },
  methods: {
    zhangfu(val) {
      if (val == 1) {
        this.iszhangfu1 = false;
        this.iszhangfu2 = true;
      } else if (val == 2) {
        this.iszhangfu1 = true;
        this.iszhangfu2 = false;
      }
    },
    getItem(item) {
      this.$store.commit('trade/select', item);
      this.$router.push({path: 'detail'});
    },
    maion(val) {
      var that = this;
      if (val == 1) {
        that.num1 = false;
        that.num2 = true;
        that.num3 = false;
      } else if (val == 2) {
        that.num1 = false;
        that.num2 = false;
        that.num3 = true;
      } else if (val == 3) {
        that.num1 = true;
        that.num2 = false;
        that.num3 = false;
      }
    },
    //添加
    add(item){
      var that = this;
      this.$layer.open({
        content: '确定添加自选?',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function() {
          //按钮【按钮一】的回调
          that.$post('addons/tf-futures/self-check/add',{symbol_id:item.id}).then(res => {
            if (res.code == 200) {
                  that.$layer.closeAll();
                  that.$layer.msg('已添加自选');
               }else{
                 that.$layer.closeAll();
                 that.$layer.msg(res.message||'添加自选失败');
               }
          });
        },
        btn2: function() {
          //按钮【按钮二】的回调
          that.$layer.closeAll();
          that.$layer.msg('已取消');
        },
        cancel: function() {
          //右上角关闭回调
          that.$layer.closeAll();
          that.$layer.msg('已取消');
        }
      });
    },
  }
};
</script>
<style scoped>
/* 副标题 已经注释的功能*/
.tab_border {
  width: 100vw;
  height: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #303030;
  position: fixed;
  top: 80px;
  left: 0px;
}
/* 字体效果 */

.font_size28 {
  font-size: 35px;
  /* line-height:35px; */
}

.scroll_tab {
  width: 45vw;
  height: 100%;
  line-height: 75px;
  font-weight: bolder;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 35px;
}

.scroll_tab2 {
  width: 25vw;
  height: 100%;
  line-height: 75px;
  font-weight: 500;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 35px;
}
/* 左右分布 */
.info_border {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
}

.list_title1 {
  position: fixed;
  top: 160px;
  left: 0px;
}

.info_left {
  width: 45vw;
}

.info_right {
  width: 61vw;
  overflow-x: auto;
  overflow-y: hidden;
}

.height8 {
  height: 90px;
  line-height: 90px;
}

.small_text {
  color: #636363;
  font-size: 25px;
}

.up {
  color: red !important;
}

.down {
  color: #00ff00 !important;
}

.info {
  color: #fac905 !important;
}

.whitebg {
  color: #efffff;
}

.list {
  user-select: none;
  width: 100%;
  height: 100%;
  /* overflow-x: hidden;
  overflow-y: auto; */
}

.listtop {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid red;
  color: #00ffe9;
}

.listtop > span {
  width: 4.5rem;
  text-align: center;
}

.listtop > span:first-child {
  width: 1.5rem;
}

.listtop > span:last-child {
  margin-right: 16px;
}

.listcenter {
  width: 100%;
  height: 2.4rem;
  overflow-y: scroll;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: none;
  color: #fff;
}

.listcenter span {
  width: 4.5rem;
  text-align: center;
}

.listcenter > span:first-child {
  width: 18px;
  text-align: center;
}

.listcenter > span:last-child {
  margin-right: 8px;
}

.active {
  border: 1px solid yellow;
  position: relative;
}

/*新*/
.applis_one {
  width: 100%;
  height: 90px;
  background: #1d1d1d;
  /* box-sizing: border-box; */
}

.column {
  width: 30%;
  height: 100%;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #636363;
  font-size: 28px;
  background: #414141;
}

.colsumn {
  width: 30%;
  height: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  padding-left: 8px;
  color: #fff;
  font-size: 28px;
}

.applis_one:active {
  background: #e96302;
}
</style>
